<template>
    <div>
            <!--新增-->
            <div v-if="oStatus==='add'">
                <el-form ref="form" :model="form" :inline="true" label-width="110px">
                    <!--部门-->
                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-1">
                            <span style="line-height: 40px">部门</span>
                        </div>
                        <div class="col-md-5">
                            <!--反显部门-->
                            <el-input
                            v-model="form.name" size="mini" style="margin-top: 8px;"
                            :disabled="true">
                        </el-input>
                        </div>
                    </div>
                    <!--输入职务-->
                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-1">
                            <span style="line-height: 40px">职务</span>
                        </div>
                        <div class="col-md-5">
                            <el-input size="mini" :maxlength="60" v-model="form.postName" style="margin-top: 8px;"></el-input>
                        </div>
                    </div>
                </el-form>
            </div>
            <!--编辑-->
            <div v-if="oStatus==='edit'">
                <el-form ref="form" :model="form" :inline="true" label-width="110px">
                        <!--部门-->
                        <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-1">
                            <span style="line-height: 40px">部门</span>
                        </div>
                        <div class="col-md-5">
                            <!--反显部门-->
                            <el-input
                            v-model="form.name" size="mini" style="margin-top: 8px;"
                            :disabled="true">
                        </el-input>
                        </div>
                    </div>
                    <!--输入职务-->
                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-1">
                            <span style="line-height: 40px">职务</span>
                        </div>
                        <div class="col-md-5">
                            <el-input size="mini" :maxlength="60" v-model="form.postName" style="margin-top: 8px;"></el-input>
                        </div>
                    </div>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer center">
                <el-button size="mini" @click="close">取 消</el-button>
                <el-button size="mini" type="primary" @click="postMaintain">确 定</el-button>
            </div>
    </div>
</template>

<script>
    import ajax from '@api/ajax'
    import {QUERY_DEP_INFO, POST_MAINTAIN} from '@api/url'
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import '@asst/css/treeselectstyle.css'

    export default {
        components: {Treeselect},
        name: 'PostMaintainForm',
        data () {
            return {
                dialogVisible: false,
                depData: {},
                oStatus: '',
                form: {
                        departId: '',
                        postName: '',
                        name: ''
                    }
            }
        },
        methods: {
            normalizer (node) {
                return {
                    id: node.departId,
                    label: node.name,
                    children: node.children
                }
            },
            // 获取调用页面传入的数据
            showForm (depData, status, data) {
                this.form.createdBy = depData.createdBy
                this.form.createdDt = depData.createdDt
                this.form.departId = depData.departId
                this.form.name = depData.name
                this.form.parentId = depData.parentId
                this.form.status = depData.status
                this.form.updatedBy = depData.updatedBy
                this.form.updatedDt = depData.updatedDt
                this.form.postId = data.postId
                this.oStatus = status
                this.dialogVisible = true
                if (status === 'edit') {
                    this.form.postName = data.name
                }
            },
            // 查询部门信息
            queryDepInfo () {
                ajax.post(QUERY_DEP_INFO).then(res => {
                    let tree = this.translateDataToTree(res.data || [])
                    this.depData = tree
                }).catch(err => {
                    console.error('查询发生错误！', err)
                }).finally(() => {
                })
            },
            // 将数据转换tree
            translateDataToTree (data) {
                // 没有父节点的数据
                let parents = data.filter(value => value.parentId === 'undefined' || value.parentId === '0')
                // 有父节点的数据
                let children = data.filter(value => value.parentId !== 'undefined' && value.parentId !== '0')
                // 定义转换方法的具体实现
                let translator = (parents, children) => {
                    // 遍历父节点数据
                    parents.forEach((parent) => {
                            // 遍历子节点数据
                            children.forEach((current, index) => {
                                    // 此时找到父节点对应的一个子节点
                                    if (current.parentId === parent.departId) {
                                        // 对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
                                        let temp = JSON.parse(JSON.stringify(children))
                                        // 让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
                                        temp.splice(index, 1)
                                        // 让当前子节点作为唯一的父节点，去递归查找其对应的子节点
                                        translator([current], temp)
                                        // 把找到子节点放入父节点的children属性中
                                        typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
                                    }
                                }
                            )
                        }
                    )
                }
                // 调用转换方法
                translator(parents, children)
                // 返回最终的结果
                return parents
            },

            // 新增或者编辑调用的方法
            postMaintain () {
                let vm = this
                let conditions = {}
                if (this.oStatus === 'add') {
                    conditions.departId = this.form.departId
                    conditions.name = this.form.postName
                    conditions.optMode = 'A'
                    conditions.status = '0'
                }
                if (this.oStatus === 'edit') {
                    conditions.optMode = 'U'
                    conditions.name = this.form.postName
                    conditions.departId = this.form.departId
                    conditions.postId = this.form.postId
                }
                ajax.post(POST_MAINTAIN, conditions).then(res => {
                    this.dialogVisible = false
                    vm.$emit('handleNodeClick', conditions)
                }).catch(err => {
                    console.error('查询发生错误！', err)
                })
            },
            // 关闭页面调用方法
            close () {
                this.$emit('closeDialog')
                // this.dialogVisible2 = false
            }

        },
        mounted () {
            this.queryDepInfo()
        }

    }
</script>

<style scoped>
.dialog-footer{
    text-align: center;
}
.selectTree {
    display: inline-block;
    width: 60%;
    overflow-y: auto;
    height: 180px;
}
</style>
